@import '../../../variables';

$spacer: $s;

// MAIN LAYOUT
// -----------
:host {
  flex-grow: 1;
  max-width: $side-nav-width;
  width: $side-nav-width;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  // mobile viewport bug fix
  min-height: -webkit-fill-available;

  &.minimal-nav {
    max-width: 42px;

    @include mq(xxs) {
      max-width: 52px;
    }

    .expand-btn mat-icon {
      margin-left: 0;
    }

    .expand-btn .title {
      display: none;
    }

    ::ng-deep {
      @include mq(xxs, max) {
        .badge {
          margin-right: -40px !important;
        }
      }

      .additional-btn {
        display: none !important;
      }

      .mat-mdc-menu-item {
        padding: 0 8px;
        @include mq(xxs) {
          padding: 0 13px;
        }
      }
    }
  }
}

@media (min-width: $side-nav-width-switch-l) {
  :host {
    max-width: $side-nav-width-l;
    width: $side-nav-width-l;
  }
}

:host {
  a,
  button {
    height: 44px !important;
    line-height: 44px !important;
    min-height: 44px !important;
  }

  a {
    color: rgba(var(--palette-foreground-text), var(--palette-foreground-text-alpha));

    @include darkTheme() {
      color: rgba(
        var(--palette-foreground-text-dark),
        var(--palette-foreground-text-dark-alpha)
      );
    }
  }
}

section {
  display: flex;
  flex-direction: column;
}

.main {
  margin-bottom: $spacer;
  padding-bottom: $spacer;

  :host-context(.isMac.isElectron) & {
    padding-top: $mac-title-bar-padding;
  }

  &:after {
    bottom: 0;
  }
}

.app {
  margin-top: auto;
  padding-top: $spacer;

  &:after {
    top: 0;
  }
}

.other-task-level-section,
.main,
.tags,
.app {
  position: relative;

  &:after {
    @include dividerBorderColor();
    content: '';
    position: absolute;
    left: $s * 2;
    right: $s * 2;
    height: 0;
  }
}

.tags,
.projects {
  margin-bottom: $spacer;
  padding-bottom: $spacer;
}

// LIST-ITEMS
// ----------

.route-link.isActiveRoute {
  background-color: mat-css-color-primary(500, 0.04);
}

.route-link.isActiveRoute {
  font-weight: bold;
}

.route-link.isActiveRoute,
.route-link.isActiveRoute mat-icon {
  // does not look good for dark theme...
  @include lightTheme {
    color: $c-primary-800;
  }
  @include darkTheme {
    color: $c-primary;
  }
}

// OTHER-ITEMS
// ----------

.expand-btn {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  opacity: 0.7;

  &:focus,
  &:hover {
    > mat-icon:last-of-type {
      opacity: 1;
    }
  }

  > mat-icon:last-of-type {
    margin-right: 0;
    //margin-left: -10px;
    opacity: 0.4;
    transition: $transition-standard;
  }

  &.isExpanded ::ng-deep mat-icon:last-of-type {
    transform: rotate(180deg);
  }
}

.no-tags-info {
  padding: 4px 16px;
  font-style: italic;
  opacity: 0.7;
}
